<template>
	<div class="content">
		<search-date
			@getChangeTime="getChangeTime"
			:initTimeDatas="initTimeDatas"
		></search-date>
		<el-row> </el-row>

		<el-row class="kinds">
			<el-col :span="5" class="item">
				<div>
					<h2>图文报告</h2>
					<h1>{{ result_data.Result }}</h1>
				</div>
			</el-col>
			<el-col :span="5" class="item">
				<h2>图像</h2>
				<h1>{{ result_data.Image }}</h1>
			</el-col>
			<el-col :span="5" class="item">
				<h2>胶片</h2>
				<h1>{{ result_data.Film }}</h1>
			</el-col>
			<!-- <el-col :span="5" class="item">
				<h2>病理切片</h2>
				<h1>600万/10T</h1>
			</el-col>
			<el-col :span="5" class="item">
				<h2>心电波形</h2>
				<h1>600万/10T</h1>
			</el-col> -->
		</el-row>
		<el-row>
			<el-col :span="12" id="c1">
				<bar-chart :chartObj="chartObj1" ref="barChart"></bar-chart>
			</el-col>
			<el-col :span="12" id="c2">
				<bar-chart :chartObj="chartObj2" ref="barChart2"></bar-chart>
			</el-col>
		</el-row>
	</div>
</template>

<script>
import searchDate from '@/components/common/searchDate'
import barChart from '@/components/chart/barChart'
import { getStorageUsage } from '@/api/data-watch'
import { getDate } from 'utils/formattime.js'
import { formatData } from '@/utils/base.js'
export default {
	name: 'storageContent',
	components: {
		barChart,
		searchDate,
	},
	data () {
		return {
			showTime: false,
			listQuery: {
				start_date: null,
				end_date: null,
			},
			initTimeDatas: [
				{
					text: '不限',
					code: 'allTime',
				},
				{
					text: '昨天',
					code: 'lastDay',
				},
				{
					text: '最近一周',
					code: 'lastOneWeek',
				},
				{
					text: '最近一月',
					code: 'lastOneMonth',
				},

			],
			chartObj: {
				chartId: null,
				data: [], // 数组对象
				titleText: null,
				desText: null, // 描述文本
				field: {
					xField: null,
					yField: null,
				},
				meta: {
					type: 'name',
					sales: 'count',
				},
			},
			chartObj1: {
				chartId: 'c1',
				data: [], // 数组对象
				titleText: '数量统计',
				desText: '单位: 万/次', // 描述文本
				field: {
					xField: 'name',
					yField: 'count',
				},
			},
			chartObj2: {
				chartId: 'c2',
				data: [], // 数组对象
				titleText: '容量统计',
				desText: '单位: TB', // 描述文本
				field: {
					xField: 'name',
					yField: 'size',
				},
			},
			result_data: {
				Img: null,
				Film: null,
				Result: null,
			},
			resultData: [
				{ label: '图文报告', val: null, type: 'Result' },
				{ label: '图像', val: null, type: 'Image' },
				{ label: '胶片', val: null, type: 'Film' },
			]
		}
	},
	computed: {},
	created () {
		this.getList()
	},
	methods: {
		changeTime ( $event ) {
			//  时间选择
			const text = $event.target.innerText
			if ( text === '不限' ) {
				this.showTime = false
				this.listQuery = {
					start_date: null,
					end_date: null,
				}
			} else if ( text === '最近半年' ) {
				this.showTime = false
				this.listQuery = Object.assign( this.listQuery, getDate( 'lastHalfYear' ) )
				console.log( this.listQuery )
			} else if ( text === '最近一年' ) {
				this.showTime = false
				this.listQuery = Object.assign( this.listQuery, getDate( 'lastOneYear' ) )
				console.log( this.listQuery )
			} else {
				this.showTime = true
			}
			if ( text !== '自定义' ) {
				this.getList()
			}
		},
		getChangeTime ( val ) {
			// 获取时间
			console.log( val )
			this.listQuery = Object.assign( this.listQuery, val )
			this.getList()
		},
		getList () {
			getStorageUsage( this.listQuery ).then( res => {
				if ( res.code === 0 ) {
					let data = formatData( res.data, 'used_size', 'file_cnt' )
					console.log(data);
					// 数据处理
					let obj = {
						Image: null,
						Film: null,
						Result: null
					},
						chartData = [],
						chartDataSize = [],
						chartObj = { name: null, size: null },
						chartObjSize = { name: null, size: null }
					// console.log( data );
					data.map( item => {
						for ( const key in obj ) {
							if ( item.type_code === key ) {
								obj[ key ] = item.result
							}

						}
						this.resultData.forEach( element => {
							if ( element.type == item.type_code ) {
								item.name = element.label
							}
						} )
						chartObj = {
							name: item.name,
							size: ( item.file_cnt / 10000 ).toFixed( 2 ) * 1, // 内容数量
						}
						chartObjSize = {
							name: item.name,
							size: ( item.used_size / 1024 ).toFixed( 2 ) * 1, // 内容容量
						}
						chartData.push( chartObj )
						chartDataSize.push( chartObjSize )
					} )
					this.result_data = obj
					console.log( chartData );
					console.log( data );

					// 绘图 {name count} {name: size}
					// this.getCount( data )
					console.log( chartData );
					let chartTempData = [ ...chartData ]
					console.log( '>>>>' );
					this.$refs.barChart.changeData( chartData )
					this.$refs.barChart2.changeData( chartDataSize )
					this.chartObj1.data = data
					this.chartObj2.data = data
				}

			} )
		}
	}
}
</script>

<style scoped lang="less">
.content {
	padding-left: 20px;
	.kinds {
		// margin-top: 20px;
		// margin-bottom: 20px;
		.item {
			width: 18.35%;
			height: 180px;
			margin-right: 1.4%;
			// border: 1px solid #00ff00;
			text-align: left;
			padding-top: 45px;
			padding-left: 2.5%;
			h2 {
				color: #333333;
				font-weight: 400;
				font-size: 18px;
				height: 25px;
			}
			h1 {
				height: 52px;
				line-height: 52px;
				font-size: 30px;
			}
		}

		> :nth-child(1) {
			background-image: url('~@/assets/imgs/data-watch/img.png');
			background-size: 100% 100%;
			background-repeat: no-repeat;
			h1 {
				color: @1C8BE4;
			}
		}
		> :nth-child(2) {
			background-image: url('~@/assets/imgs/data-watch/movie.png');
			background-size: 100% 100%;
			background-repeat: no-repeat;
			h1 {
				color: @5660A9;
			}
		}
		> :nth-child(3) {
			background-image: url('~@/assets/imgs/data-watch/film.png');
			background-size: 100% 100%;
			background-repeat: no-repeat;
			h1 {
				color: @EF8900;
			}
		}
		> :nth-child(4) {
			background-image: url('~@/assets/imgs/data-watch/binli.png');
			background-size: 100% 100%;
			background-repeat: no-repeat;
			h1 {
				color: @49B523;
			}
		}
		> :nth-child(5) {
			background-image: url('~@/assets/imgs/data-watch/xindian.png');
			background-size: 100% 100%;
			background-repeat: no-repeat;
			h1 {
				color: @FF6F6F;
			}
		}
	}
}
</style>
